<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>



    <el-card>

      <!--一级权限(一级菜单)-->
      <el-row   :class="['menuLevel1','vcenter']" v-for="level1 in privileges" :key="level1.id">
        <el-col :span="4" >
          <el-tag>{{level1.name}}</el-tag><i class="el-icon-caret-right"></i>
        </el-col>
        <el-col :span="20">
          <el-row :class="['menuLevel2','vcenter']" v-for="level2 in level1.children" :key="level2.id">
            <el-col :span="4">
              <el-tag>{{level2.name}}</el-tag><i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span="16">
              <el-tag type="success"  v-for="level3 in level2.children" :key="level3.id">{{level3.name}}</el-tag>
            </el-col>
          </el-row>
        </el-col>


      </el-row>
    </el-card>
  </div>
</template>

<script>

  import {mapState} from 'vuex'
  export default {
    name: "Privileges",
    data(){
      return {
      }
    },

    computed:{
      ...mapState({
        privileges:state=>state.rbac.privileges
      })
    },

    created() {
    },
    methods:{

    }
  }
</script>

<style scoped>
  .menuLevel1{
    margin:5px;
    border-bottom:1px solid #eee;
  }
  .menuLevel2{
    margin:5px;
    border-bottom:1px solid #eee;
  }
  .el-tag{
    margin:3px;
  }

  .vcenter{
    display:flex;
    align-items: center;

  }
</style>
